<template>
    <div class="marketing_group_detail_group">
        <el-button
            type="primary"
            v-auth="'group_list:edit'"
            v-if="[1, 2].includes(props.status)"
            class="edit_group_btn"
            @click="editHandler"
            >编辑</el-button
        >
        <el-descriptions :column="1" class="custom-el-desc">
            <template #title><h1>基础设置</h1></template>
            <el-descriptions-item
                v-for="{ label, prop } in commonList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                <template v-if="['requiredNumText', 'goods'].includes(prop)">
                    <div v-if="prop == 'requiredNumText'">
                        <template v-if="type == 5">
                            <div v-for="item in form.requiredNumText" :key="item">
                                {{ item }}
                            </div>
                        </template>
                        <template v-else>
                            {{ form.requiredNumText }}
                        </template>
                    </div>
                    <el-table
                        v-if="prop == 'goods'"
                        class="sku-table-inline"
                        :data="form.goodsSku"
                        :span-method="skuSpanMethod"
                        width="800">
                        <el-table-column label="商品" width="257">
                            <div class="good-preview">
                                <el-image style="width: 36px; height: 36px" :src="goodInfo.materialSrc" fit="fill" />
                                <div>
                                    <h5>{{ selectData.goodsName }}</h5>
                                    <p>{{ selectData.goodsNo }}</p>
                                </div>
                            </div>
                        </el-table-column>
                        <template v-if="type == 5">
                            <el-table-column
                                v-for="{ prop, ...rest } in ladderColumns"
                                :key="prop"
                                :prop="prop"
                                v-bind="rest">
                                <template v-if="['0', '1', '2'].includes(prop)" #default="{ row }">
                                    {{ row.groupPrice[prop] }}
                                </template>
                            </el-table-column>
                        </template>
                        <template v-else>
                            <el-table-column
                                v-for="{ prop, ...rest } in skuTableColumns"
                                :key="prop"
                                :prop="prop"
                                v-bind="rest">
                            </el-table-column>
                        </template>
                    </el-table>
                </template>
                <template v-else>
                    {{ form[prop] }}
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1">
            <template #title><h1>高级设置</h1></template>
            <el-descriptions-item
                v-for="{ label, desc, prop } in advancedList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                <div class="custom-desc-dev">
                    <div class="custom-icon">
                        <el-icon>
                            <Select v-if="form[prop] == 2" />
                            <CloseBold v-else
                        /></el-icon>
                    </div>
                    {{ form[prop] == 2 ? '已' : prop == 'discountRepeat' ? '不' : '未' }}{{ desc }}
                    <div v-if="label === '限购规则：' && form[prop] == 2">
                        <div class="custom-checkbox" v-if="form.purchaseLimit">
                            活动每人限购{{ form.purchaseLimit }}件
                        </div>
                        <div class="custom-checkbox" v-if="form.orderPurchaseLimit">
                            活动每单限购{{ form.orderPurchaseLimit }}件
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue';
import request from '@/request/index';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();

let form = reactive({});
const commonList = [
    { name: '', label: '活动名称：', desc: '', prop: 'activityName' },
    { name: '', label: '活动时间：', desc: '', prop: 'activityTime' },
    { name: '', label: '参团人数：', desc: '', prop: 'requiredNumText' },
    { name: '', label: '拼团商品：', desc: '', prop: 'goods' },
    { name: '', label: '拼团有效期：', desc: '', prop: 'spellGroupExpireAtText' }
];
const advancedList = [
    { name: '', label: '优惠叠加：', desc: '允许叠加使用优惠券', prop: 'discountRepeat' },
    { name: '', label: '拼团包邮：', desc: '开启拼团包邮', prop: 'spellGroupMail' },
    { name: '', label: '限购规则：', desc: '开启限购', prop: 'purchaseRule' },
    { name: '', label: '凑团：', desc: '开启凑团', prop: 'gatherGroup' },
    { name: '', label: '模拟成团：', desc: '开启模拟成团', prop: 'simulateGroup' }
];
// todo: 根据后台返回计算普通和高级设置

const props = defineProps(['id', 'type', 'status']);

const skuTableColumns = reactive([
    { label: '规格', prop: 'specs', width: '159' },
    { label: '售价（元）', prop: 'skuPriceText', width: '160' },
    { label: '拼团价（元）', prop: 'groupPrice', width: '223', fixed: 'right' }
]);
const goodInfo = reactive({
    materialSrc: null
});
let selectData = reactive([]);
const requiredNum = reactive([null, null]);
const ladderColumns = computed(() => {
    const baseCols = [
        { label: '规格', prop: 'specs', minWidth: '159' },
        { label: '售价（元）', prop: 'skuPriceText', minWidth: '160', fixed: 'right' }
    ];
    const otherCols = requiredNum
        // .filter(item => Boolean(item))
        .map((item, index) => {
            return { label: (item || 0) + '人拼团价（元）', prop: `${index}`, width: '223', fixed: 'right' };
        });
    return [...baseCols, ...otherCols];
});

const editHandler = () => {
    const typeNames = {
        3: 'edit',
        4: 'newEdit',
        5: 'ladderEdit'
    };
    const path = `/marketing/group/${typeNames[props.type]}`;
    router.push({
        path,
        query: {
            id: props.id
        }
    });
};

const skuSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
        if (rowIndex === 0) {
            return {
                rowspan: form.goodsSku.length,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    } else {
        return {
            rowspan: 1,
            colspan: 1
        };
    }
};

const getDetail = async () => {
    const { data } = await request('spellGroupInfo', { id: props.id });
    data.activityTime = `${data.activityStartTime} 至 ${data.activityEndTime}`;
    const [d, h, m] = data.spellGroupExpireAt;
    data.spellGroupExpireAtText = `${d}日${h}时${m}分`;
    data.goodsSku = data.skuInfo.map(item => {
        let { id: skuId, specs, skuPrice, groupPrice } = item;
        return {
            skuId,
            specs: specs.join(),
            skuPrice: skuPrice / 100,
            skuPriceText: `${skuPrice / 100}`,
            groupPrice: props.type == 5 ? groupPrice?.map(item => item / 100) : groupPrice[0] / 100
        };
    });

    if (props.type == 5) {
        const text = ['一', '二', '三'];
        data.requiredNumText = data.requiredNum.map((item, index) => {
            return `第${text[index]}阶梯人数 ${item} 人`;
        });
        Object.assign(requiredNum, data.requiredNum);
    } else {
        data.requiredNumText = `${data.requiredNum}人`;
    }
    Object.assign(form, data);
    const { name: goodsName, goodsNo } = data.goods;
    Object.assign(selectData, { goodsName, goodsNo });
    goodInfo.materialSrc = data.goods.img;
};

onMounted(() => {
    getDetail();
});
</script>

<style lang="scss">
.sku-table-inline {
    display: inline-block;
    border: 1px solid #eaeaea !important;
    max-width: 90%;
    min-width: 800px;
    tbody tr:first-of-type {
        td:first-of-type {
            border-right: 1px solid #eaeaea;
        }
    }
    .good-preview {
        display: flex;
        align-items: center;
        & > div {
            &:first-of-type {
                margin-right: 8px;
                min-width: 36px;
            }
            &:last-of-type {
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
        }
        h5,
        p {
            margin: 0;
        }
        h5 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
        p {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
}
</style>
<style lang="scss" scoped>
.marketing_group_detail_group {
    position: relative;
    background: #fff;

    :deep .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
        display: flex;
    }

    h1 {
        font-size: 14px;
        font-weight: 500;
        position: relative;
        padding-left: 15px;
        margin: 0;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            width: 3px;
            height: 70%;
            background-color: var(--el-color-primary);
        }
    }
    .edit_group_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
    }
    .custom-el-desc {
        margin-top: 10px;
        margin-bottom: 40px;
    }
    :deep .custom-label {
        width: 90px;
        text-align: right;
        display: inline-block;
        margin-right: 0px;
        color: #969696;
    }
    :deep {
        .el-descriptions__content {
            /* width: 90%; */
            color: #33302d;
        }
    }
    .custom-desc-dev {
        display: flex;
        align-items: center;
        line-height: initial;
    }
    .custom-icon {
        width: 14px;
        height: 14px;
        background: #ffeded;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        :deep .el-icon {
            color: #fe292b;
            width: 11px;
        }
    }

    .custom-checkbox {
        margin-top: 10px;
        padding-left: 19px;
    }
}
</style>
